<!DOCTYPE html>
<html>
  <head>
    <title>CRS.Simple example - Leaflet</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      #map {
        width: 600px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script>
      var map = L.map('map', {
        crs: L.CRS.Simple,
        minZoom: -3
      })

      // CRS.Simple 中的坐标采用 [y, x] 的形式，而不是 [x, y]。如同 Leaflet 使用 [lat, lng]，而不是 [lng, lat]
      var yx = L.latLng
      // 转换坐标，为了使代码更具可读性
      var xy = function (x, y) {
        if (L.Util.isArray(x)) {
          // When doing xy([x, y]);
          return yx(x[1], x[0])
        }
        return yx(y, x) // When doing xy(x, y);
      }

      var bounds = [xy(-25, -26.5), xy(1023, 1021.5)]
      var image = L.imageOverlay('uqm_map_full.png', bounds).addTo(map)

      var sol = xy(175.2, 145.0)
      var mizar = xy(41.6, 130.1)
      var kruegerZ = xy(13.4, 56.5)
      var deneb = xy(218.7, 8.3)

      L.marker(sol).addTo(map).bindPopup('Sol')
      L.marker(mizar).addTo(map).bindPopup('Mizar')
      L.marker(kruegerZ).addTo(map).bindPopup('Krueger-Z')
      L.marker(deneb).addTo(map).bindPopup('Deneb')

      var travel = L.polyline([sol, deneb]).addTo(map)

      map.setView(xy(120, 70), 1)
    </script>
  </body>
</html>
